import React, {useEffect, useState} from 'react'
import CustomTable from '@/components/Table'
import Styles from './index.less'
import {geTselectDitchRewardsRecordsList} from '@/service/merchantCenter/channelSettlement'
import {getDictsByKeys} from '@/service/common/dict'

const data = [
	{id: '1', name: '渠道sp'},
	{id: '2', name: '车司'},
	{id: '3', name: '自营-BD'},
	{id: '4', name: '自营-司推司'},
	{id: 5, name: '自营-普推司'},
]

export default function ({pageType, clueId, channelTypeOneType}: any) {
	// const [dataList, setDataList] = useState<any[]>([]);
	// const [pagination, setPagination] = useState({ current: 1, size: 10 });
	const [total, setTotal] = useState()
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [tableList, setTableList] = useState<any[]>([])
	const [loading, setLoading] = useState(false)

	const [starRrating, setStarRrating] = useState([])

	const getKeyList = () => {
		getDictsByKeys({
			dictKeys: ['star_rating'],
		}).then((res: any) => {
			if (res?.data?.length) {
				res.data.forEach((item: any) => {
					if (item.name === 'star_rating') {
						setStarRrating(item.listDicts)
					}
				})
			}
		})
	}

	useEffect(() => {
		getKeyList()
	}, [])

	const getTabelValue = async (value:any) => {
		setLoading(true)
		const res = await geTselectDitchRewardsRecordsList({
			...value,
			id: clueId,
		})
		if (res?.data) {
			setTotal(res?.data?.total || 0)
			if (res.data.records) {
				setTableList(res.data?.records || [])
			}
		}
		setLoading(false)
	}

	useEffect(() => {
		getTabelValue(params)
	}, [])

	const Colnums: any[] = [
		{title: '费用发生月份', dataIndex: 'expenseMouth', align: 'center'},
		{title: '费用发生日期', dataIndex: 'expenseDate', align: 'center'},
		{title: '主体id', dataIndex: 'subjectId', align: 'center'},
		{title: '主体', dataIndex: 'subjectName', align: 'center'},
		{title: '公司ID', dataIndex: 'orgId', align: 'center'},
		{title: '公司名称', dataIndex: 'orgName', align: 'center'},
		{title: '城市', dataIndex: 'cityName', align: 'center'},
		{
			title: 'AMC一级渠道类型 ',
			dataIndex: 'firstLevelType',
			align: 'center',
			render: (text: any) => {
				const obj: any = channelTypeOneType?.find(
					(res: any) => res.type === text,
				)
				return obj?.valueName
			},
		},
		{
			title: 'AMC二级渠道类型',
			dataIndex: 'secondLevelType',
			align: 'center',
			render: (text: any) =>
				data?.map((res: any) => {
					if (text === res?.id) {
						return <span>{res?.name}</span>
					}
					return ''
				}),
		},
		{title: '渠道id', dataIndex: 'ditchId', align: 'center'},
		{title: '渠道code码', dataIndex: 'code', align: 'center'},
		{title: '渠道名称', dataIndex: 'ditchName', align: 'center'},
		{
			title: '类型',
			dataIndex: '',
			align: 'center',
			render: () => '阶梯奖励',
		},
		{title: '阶梯', dataIndex: 'stair', align: 'center'},
		{title: '单期拉新费（元）', dataIndex: 'pullFee', align: 'center'},
		{
			title: '订单拉新总费用（元）',
			dataIndex: 'pullFeeTotal',
			align: 'center',
		},
		{title: '税率', dataIndex: 'taxRate', align: 'center'},
		{
			title: '订单拉新不含税总费用',
			dataIndex: 'noIncludedFee',
			align: 'center',
		},
		{title: '订单号', dataIndex: 'carOrderId', align: 'center'},
		{
			title: '是否有效拉新',
			dataIndex: 'isEffective',
			align: 'center',
			render: (text: any) => (({'1': '是', '2': '否'} as any)[text]),
		},
		{
			title: '司机是否有人证',
			dataIndex: 'isWitness',
			align: 'center',
			render: (text: any) => (({'1': '是', '2': '否'} as any)[text]),
		},
		{title: '月租金', dataIndex: 'rentAmount', align: 'center'},
		{title: '租期', dataIndex: 'leaseTerm', align: 'center'},
		{title: '订单总租金', dataIndex: 'rentTotal', align: 'center'},
		{title: '租赁类型', dataIndex: 'leaseTypename', align: 'center'},
		// {title: '订单类型', dataIndex: 'leaseTypename', align: 'center'},
		{title: '车架号', dataIndex: 'vinNo', align: 'center'},
		{title: '车辆品类', dataIndex: 'carCategory', align: 'center'},
		{title: '能源类型', dataIndex: 'energyType', align: 'center'},
		{title: '车型', dataIndex: 'modelName', align: 'center'},
		{title: '车龄', dataIndex: 'vehicleAge', align: 'center'},
		{
			title: '星级',
			dataIndex: 'starRating',
			align: 'center',
			render: (text: any) => {
				const obj: any = starRrating.find(
					(item: any) => item.value === Number(text),
				)
				return obj?.valueName
			},
		},
		{title: '下单时间', dataIndex: 'createOrderTime', align: 'center'},
		{title: '订单提车时间', dataIndex: 'takeCarTime', align: 'center'},
		{
			title: '状态',
			dataIndex: 'settlementStatus',
			align: 'center',
			render: (text: any) =>
				(({'1': '未结算', '2': '已结算'} as any)[text]),
		},
		{title: '结算时间', dataIndex: 'settlementTime', align: 'center'},
	]

	return (
		<>
			{pageType ? (
				<div className={Styles.clueRecommendationRecordType}>
					<div className={Styles.titleBox}>阶梯奖励明细</div>
					<div className={Styles.content}>
						<CustomTable
							params={params}
							columns={Colnums}
							scroll={{x: 4000, y: 600}}
							total={total}
							pagination
							callback={(pagination: any) => {
								setParams(pagination)
								getTabelValue(pagination)
							}}
							loading={loading}
							dataSource={tableList}
						/>

						{/* <Table
          pagination
          params={pagination}
          columns={Colnums}
          callback={(p: any) => {
            setPagination(p);
          }}
          dataSource={dataList}
        /> */}
					</div>
				</div>
			) : (
				<></>
			)}
		</>
	)
}
